<#assign pageTitle="专家_${siteCompany.siteName!}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/teacher.css" />
</#assign>
<#assign pageContent>
    <van-nav-bar
            title="专家"
            left-text="返回"
            right-text="首页"
            left-arrow
            @click-left="window.history.back();"
            @click-right="window.location.href='/';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="chooser-wrap">
        <a class="active">全部</a>
        <a class="">建筑设计</a>
        <a class="">室内设计</a>
        <a class="">家居设计</a>
        <a class="">服装设计</a>
        <a class="">广告设计</a>
        <a class="">动漫设计</a>
        <a class="">美术基础</a>
    </div>
    <#--<div class="filter-box">
        <div class="fl">
            <span class="item active">综合</span>
            <span class="division">|</span>
            <span class="item">热度</span>
            <span class="division">|</span>
            <span class="item">点赞</span>
        </div>
        <div class="fr">
            <van-checkbox v-model="checked" shape="square">推荐</van-checkbox>
        </div>
    </div>-->
    <van-pull-refresh v-model="dtRefreshing" @refresh="onRefreshDt" class="main-item">
        <van-list
                v-model="dtLoading"
                :finished="dtFinished"
                :error.sync="error"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="onLoadDt"
                class="course-card"
        >
            <van-row gutter="20">
                <van-col span="12"  v-for="(item,index) in dtList" :key="index" >
                    <a :href="'/teacher/view/'+ item.id +'.html'">
                        <div class="course-pic">
                            <img v-if="item.avatar" v-lazy="item.avatar"  alt="">
                            <img v-else :src="'/static/images/teacher/teacher-avatar-'+ item.sex +'.png'"  alt="">
                        </div>
                        <div class="list-teacher-info">
                            <h2>{{item.name}}</h2>
                            <div class="list-teacher-introduce" v-html="item.intro"></div>
                            <div class="list-teacher-type">
                                <span>{{item.tags}}</span>
                            </div>
                        </div>
                    </a>
                </van-col>
            </van-row>
        </van-list>
        <van-empty description="小编还没有整理内容哦，去看看其它吧" v-if="emptyDoc"/>
    </van-pull-refresh>
</#assign>
<#assign pageScript>
    <script>
        var channelId = 8 //同步课
            , subjectId  = 0 //专业id
            , categoryId  = 0 // 分类id
            , elite = 0 //是否推荐
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    activeTab:0,
                    channelId :channelId,
                    subjectId : subjectId,
                    categoryId: categoryId,
                    elite: elite,
                    dtList: [],//加载所有内容
                    dtLoading: false,
                    dtFinished: false,
                    dtRefreshing: false,
                    dtPage: 0,
                    error: false,
                    limit: 5,
                    showList: false,
                    emptyDoc: false,
                    checked:false
                }
            },
            methods: {
                onLoadDt() {
                    var _self = this;
                    if (_self.dtRefreshing) {
                        _self.dtList = [];
                        _self.dtRefreshing = false;
                    }
                    _self.dtPage = _self.dtPage + 1;
                    _self.dtLoading = true;
                    axios.get('/ajax/teacher/list.json', {
                        params: {
                            page: _self.dtPage,
                            limit: _self.limit,
                            channelId :_self.channelId,
                            subjectId : _self.subjectId,
                            categoryId: _self.categoryId,
                            elite: _self.elite
                        }
                    }).then(function (response) {
                        if (response.data.code === 0) {
                            _self.dtList = _self.dtList.concat(response.data.data);
                            if (response.data.data.length < _self.limit) {
                                _self.dtFinished = true;
                            }
                            if (response.data.data.length == 0 && _self.dtPage < 2) {//初始未请求到数据
                                _self.emptyDoc = true;
                                return
                            }
                        } else {
                            _self.error = true;
                            console.log(response.data.msg);
                        }
                        _self.dtLoading = false;
                    }).catch(function (error) {
                        _self.error = true;
                        _self.dtLoading = false;
                        console.log(error);
                    });
                },
                onRefreshDt() {
                    // 重新加载数据
                    let _self = this;
                    _self.dtRefreshing = true;
                    _self.dtPage = 0;
                    _self.dtList = [];
                    _self.onLoadDt();
                },
            },
        })
    </script>
</#assign>
<#include "../layout_h5.ftl" />